#confirm-wrapper {
  @apply pointer-events-auto relative z-[9999];
}
#message-wrapper {
  @apply fixed top-4 left-0 w-full text-center;
  @apply flex flex-col-reverse;
  @apply pointer-events-none z-50;
}

.message {
  max-width: 300px;
  @apply rounded-md bg-white dark:bg-gray-900 dark:border-gray-700 shadow-sm;
  @apply m-auto py-3 px-4 inline-flex gap-3 items-center;
  @apply border text-sm text-gray-700 dark:text-gray-400;
}

.message svg {
  @apply w-6 h-6 flex-shrink-0 mt-0.5;
}

.message.info svg {
  @apply text-blue-700 dark:text-blue-400;
}

.message p {
  @apply text-left;
}

.message-container {
  @apply px-1 py-2;
}

.message svg {
  @apply rounded-full p-1.5;
}

.message.info svg {
  @apply bg-blue-500/20;
}

.message.success svg {
  @apply text-green-600 dark:text-green-400 bg-green-500/20;
}

.message.error svg {
  @apply text-red-700 dark:text-red-400 bg-red-500/20;
}

.message.warning svg {
  @apply text-yellow-700 dark:text-yellow-400 bg-yellow-500/20;
}
